<template>
	<view class="calendar-sign">
		<view class="calendar-sign-header line" @click="toggle">
			<view class="title">{{ getTitle() }}</view>
			<view class="arrow" :class="{ down: show }"></view>
		</view>
		<view v-if="show" class="calendar-sign-body line">
			<view class="calendar-title">{{ calendar.month }}月签到日历</view>
			<view class="calendar">
				<view class="calendar-weeks">
					<view class="calendar-week-row week" v-for="(week, index) in weeks" :key="index">{{ week }}</view>
				</view>
				<view class="calendar-day-rows">
					<view class="calendar-day-row" v-for="(row, rowIndex) in calendar.rows" :key="rowIndex">
						<view class="calendar-day" :class="{ today: day.isToday, signed: day.signed }" v-for="(day, dayIndex) in row" :key="dayIndex">
							<text class="day-text">{{ day.value }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		selected: {
			type: Array,
			default() {
				return [];
			}
		},
		dateString: {
			type: String,
			default: ''
		},
		index: {
			type: Number,
			default: 0
		},
		expand: {
			type: Number,
			default: 0
		}
	},
	data() {
		const { year, month, day, week, days } = this.getInfo();
		return {
			show: false,
			calendar: {
				year,
				month,
				day,
				week,
				days,
				rows: []
			},
			backupRows: [],
			weeks: ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
		};
	},
	watch: {
		selected: {
			handler(list) {
				if (list && list.length) {
					this.update();
				}
			},
			deep: true
		},
		dateString: {
			handler(val) {
				let date = new Date();
				if (val) {
					const list = val.split('-');
					const year = Number(list[0]) || date.getFullYear();
					const month = Number(list[1]) - 1 || date.getMonth();
					const day = Number(list[2]) || date.getMonth() === Number(list[1]) - 1 ? date.getDate() : 1;
					date = new Date(year, month, day);
				}
				this.createCalendar(date);
			},
			immediate: true
		},
		expand: {
			handler(val) {
				this.show = val === this.index;
			},
			immediate: true
		}
	},
	methods: {
		toggle(val) {
			this.show = !this.show;
			this.$emit('update:expand', this.show ? this.index : -1);
		},
		getInfo(date) {
			date = date || new Date();
			const year = date.getFullYear(),
				month = date.getMonth() + 1,
				day = date.getDate(),
				week = new Date(year, month - 1, 1).getDay(),
				days = new Date(year, month, 0).getDate();
			return { year, month, day, week, days };
		},
		getMonthOrDay(val) {
			return val >= 10 ? val : '0' + val;
		},
		getTitle() {
			const {
				calendar: { year, month }
			} = this;
			return `${year}-${this.getMonthOrDay(month)}`;
		},
		getDateString(day) {
			const {
				calendar: { year, month }
			} = this;
			return `${year}-${this.getMonthOrDay(month)}-${this.getMonthOrDay(day)}`;
		},
		createCalendar(date) {
			Object.assign(this.calendar, this.getInfo(date));
			const { week, days, day } = this.calendar,
				rows = [];
			for (let i = 0; i < week; i++) {
				let row = (rows[0] = rows[0] || []);
				row.push({ value: '' });
			}
			for (let i = 0, j = 0; i < days; i++) {
				let row = (rows[j] = rows[j] || []);
				if (row.length === 7) {
					j++;
					row = rows[j] = rows[j] || [];
				}
				row.push({ value: i + 1, isToday: i + 1 === day, dateString: this.getDateString(i + 1) });
			}
			const lastRow = rows[rows.length - 1];
			for (let i = lastRow.length; i < 7; i++) {
				lastRow.push({ value: '' });
			}
			this.calendar.rows = rows;
			this.backupRows = JSON.parse(JSON.stringify(rows));
			this.update();
		},
		update() {
			const { selected, backupRows } = this;
			const rows = JSON.parse(JSON.stringify(backupRows));
			for (let row of rows) {
				for (let day of row) {
					for (let item of selected) {
						if (item === day.dateString || item.date === day.dateString) {
							day.signed = true;
							day.info = item.info;
						}
					}
				}
			}
			this.calendar.rows = rows;
		}
	}
};
</script>
<style lang="less" scoped>
.calendar-sign {
	font-family: PingFangSC-Medium, PingFang SC;
	background-color: #fff;
	.line {
		position: relative;
		&::after {
			content: '';
			height: 2rpx;
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: #f7f7f7;
			transform: scaleY(0.5);
		}
		&:last-child {
			&::after {
				height: 0;
				display: none;
			}
		}
	}
	.calendar-sign-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 24rpx;
		.title {
			font-size: 36rpx;
			font-weight: 500;
			color: #66645d;
			line-height: 50rpx;
		}
		.arrow {
			position: relative;
			width: 16rpx;
			height: 24rpx;
			transition: all 0.2s;
			background: url(//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/img/sign-arrow.png) no-repeat;
			background-size: 12rpx 24rpx;
			&.down {
				transform: rotate(90deg);
			}
		}
	}
	.calendar-sign-body {
		.calendar-title {
			font-size: 36rpx;
			font-weight: 500;
			color: rgba(102, 100, 93, 0.5);
			line-height: 50rpx;
			padding: 24rpx 0;
			text-align: center;
			position: relative;
			&::after {
				content: '';
				height: 2rpx;
				position: absolute;
				left: 36rpx;
				right: 36rpx;
				bottom: 0;
				background-color: #f7f7f7;
				transform: scaleY(0.5);
			}
		}
		.calendar {
			padding: 0 12rpx 6rpx 12rpx;
			.calendar-weeks {
				display: flex;
				.calendar-week-row {
					width: calc(100% / 7);
					text-align: center;
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(102, 100, 93, 0.5);
					line-height: 33rpx;
					padding: 24rpx 0;
					&.week {
					}
				}
			}
			.calendar-day-rows {
				.calendar-day-row {
					display: flex;
					align-items: center;
					.calendar-day {
						width: calc(100% / 7);
						text-align: center;
						font-size: 24rpx;
						font-weight: 400;
						color: #66645d;
						line-height: 33rpx;
						flex-shrink: 0;
						flex-grow: 1;
						padding: 30rpx 0;
						&.signed {
							&.today {
								background: url('//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/img/sun-laugh.png') no-repeat center;
								background-size: 93rpx 93rpx;
							}
							background: url('//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/img/laugh.png') no-repeat center center;
							background-size: 64rpx 64rpx;
							.day-text {
								color: rgba(249, 203, 128, 1);
								top: -12rpx;
							}
						}
						.day-text {
							position: relative;
							line-height: 33rpx;
						}
					}
				}
			}
		}
	}
}
</style>
